<template>
  <div id="flight-orders">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item active ms-2" aria-current="page">
          机票订单
        </li>
        <li class="breadcrumb-item ms-auto">
          <router-link to="/flt/search">国内机票</router-link>
        </li>
        <li class="breadcrumb-item me-2">
          <router-link to="/intlflt/search">国际机票</router-link>
        </li>
      </ol>
    </nav>

    <div class="card bg-transparent">
      <div
        class="alert alert-warning my-0 py-0"
        role="alert"
        v-if="stat !== null"
      >
        <span class="col" v-if="stat.flightOrderWaitTicketingCount > 0">
          <router-link to="/flt/orders"
            >待出票：{{ stat.flightOrderWaitTicketingCount }}</router-link
          >
        </span>
        <span class="col small" v-if="stat.flightOrderTicketingCount > 0">
          <router-link to="/flt/orders"
            >出票中：{{ stat.flightOrderTicketingCount }}</router-link
          >
        </span>
        <span class="col" v-if="stat.refundOrderWaitingCount > 0">
          <router-link to="/flt/refund/orders"
            >待退票：{{ stat.refundOrderWaitingCount }}</router-link
          >
        </span>
        <span class="col small" v-if="stat.refundOrderProcessingCount > 0">
          <router-link to="/flt/refund/orders"
            >退票中：{{ stat.refundOrderProcessingCount }}</router-link
          >
        </span>
        <span class="col" v-if="stat.changeOrderWaitingCount > 0">
          <router-link to="/flt/change/orders"
            >待改签：{{ stat.changeOrderWaitingCount }}</router-link
          >
        </span>
        <span class="col small" v-if="stat.changeOrderProcessingCount > 0">
          <router-link to="/flt/change/orders"
            >改签中：{{ stat.changeOrderProcessingCount }}</router-link
          >
        </span>

        <span class="col" v-if="stat.vasOrderKseatWaitingCount > 0">
          <router-link to="/vas/orders"
            >待K位：{{ stat.vasOrderKseatWaitingCount }}</router-link
          >
        </span>
        <span class="col small" v-if="stat.vasOrderKseatProcessingCount > 0">
          <router-link to="/vas/orders"
            >K位中：{{ stat.vasOrderKseatProcessingCount }}</router-link
          >
        </span>
      </div>
      <div class="card-body py-1 px-1">
        <form>
          <div class="row">
            <div class="col-1">
              <input
                type="textfield"
                class="form-control"
                size="6"
                placeholder="编码"
                v-model.trim="pnrNo"
              />
            </div>
            <div class="col-1">
              <input
                type="textfield"
                class="form-control"
                size="6"
                placeholder="订单号"
                v-model.trim="orderNo"
              />
            </div>
            <div class="col-1">
              <input
                type="textfield"
                class="form-control"
                size="6"
                placeholder="姓名"
                v-model.trim="name"
              />
            </div>
            <div class="col-1">
              <input
                type="textfield"
                class="form-control"
                size="6"
                placeholder="证件号"
                v-model.trim="idno"
              />
            </div>
            <div class="col-1">
              <input
                type="textfield"
                class="form-control"
                size="12"
                placeholder="票号"
                v-model.trim="ticketNo"
              />
            </div>
            <div class="col-1">
              <input
                type="textfield"
                class="form-control"
                size="10"
                placeholder="航班号"
                v-model.trim="flightNo"
              />
            </div>
            <div class="col-1">
              <my-date-picker
                id="ddate"
                v-model="ddate"
                placeholder="航班日期"
              ></my-date-picker>
            </div>
            <div class="col-1">
              <my-date-picker
                id="beginDate"
                name="sc.beginDate"
                v-model="beginDate"
                placeholder="开始日期"
              ></my-date-picker>
            </div>
            <div class="col-1">
              <my-date-picker
                id="endDate"
                name="sc.endDate"
                v-model="endDate"
                placeholder="截止日期"
              ></my-date-picker>
            </div>

            <div class="col-1">
              <select class="form-select" v-model.number="payStatus">
                <option value="-1">收款状态</option>
                <option value="0">未收</option>
                <option value="1">已收</option>
              </select>
            </div>
            <div class="col-1">
              <select class="form-select" v-model.number="workStatus">
                <option value="0">完成状态</option>
                <option value="1">未完成</option>
              </select>
            </div>
            <div class="col-1">
              <select class="form-select" v-model.number="intlTicket">
                <option value="-1">所有</option>
                <option value="0">国内</option>
                <option value="1">国际</option>
              </select>
            </div>
          </div>
          <div class="row mt-1">
            <div class="col-1">
              <select
                class="form-select"
                v-model.number="status"
                name="sc.status"
              >
                <option value="-1">订单状态</option>
                <option value="0">暂不开票</option>
                <option value="1">待开票审核</option>
                <option value="2">待开票</option>
                <option value="4">已取消</option>
                <option value="8">开票中</option>
                <option value="16">已开票</option>
                <option value="32">已完成</option>
              </select>
            </div>
            <div class="col-1">
              <my-select-op1 :username.sync="op1"></my-select-op1>
            </div>
            <div class="col-1">
              <my-select-customer
                :customerId.sync="customerId"
                :status="1"
                sizing="sm"
              ></my-select-customer>
            </div>
            <div class="col-1">
              <select class="form-select" v-model.number="customerType">
                <option value="-1">客户类型</option>
                <option value="0">散客(企业)</option>
                <option value="1">企业</option>
              </select>
            </div>
            <div class="col-1">
              <select class="form-select" v-model.number="sc.pageSize">
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
              </select>
            </div>

            <div class="col">
              <button
                type="button"
                class="btn btn-primary"
                @click.stop="search()"
              >
                查找
              </button>
              <button
                type="button"
                class="btn btn-secondary ms-2"
                @click.stop="reset()"
              >
                重置
              </button>

              <router-link class="btn btn-success float-end" to="/new/flt/order"
                >新建订单</router-link
              >
            </div>
          </div>
        </form>
      </div>
    </div>

    <nav id="pagination-box-top" class="float-end">
      <my-pagination
        name="pagination"
        :row-count="sc.rowCount"
        :page-total="sc.pageTotal"
        :page-no="sc.pageNo"
        @next-page="nextPage"
        @prev-page="prevPage"
        @direct-page="directPage"
      ></my-pagination>
    </nav>

    <flight-order-list :dataList="dataList"></flight-order-list>

    <nav id="pagination-box-bottom" class="float-end">
      <my-pagination
        name="pagination"
        :row-count="sc.rowCount"
        :page-total="sc.pageTotal"
        :page-no="sc.pageNo"
        @next-page="nextPage"
        @prev-page="prevPage"
        @direct-page="directPage"
      ></my-pagination>
    </nav>
  </div>
</template>

<script>
import { searchFlightOrders, statFlightOrderStatus } from "@/api/flight";
import MyDatePicker from "@/components/my-datepicker.vue";
import MyPagination from "@/components/my-pagination.vue";
import FlightOrderList from "@/components/list/flight-order-list.vue";
import MySelectOp1 from "@/components/my-select-operator.vue";
import MySelectCustomer from "@/components/my-select2-customer.vue";

export default {
  name: "MyFlightOrders",
  components: {
    MyDatePicker,
    MyPagination,
    FlightOrderList,
    MySelectOp1,
    MySelectCustomer,
  },
  data() {
    return {
      dataList: [],

      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 10,
        pageTotal: 0,
      },

      beginDate: "",
      endDate: "",
      name: "",
      idno: "",
      ticketNo: "",
      pnrNo: "",
      status: -1,
      customerId: -1,
      customerType: -1,
      intlTicket: -1,
      workStatus: 0,
      onlyMine: 0,
      op1: "",
      orderNo: "",
      payStatus: -1,
      flightNo: "",
      ddate: "",

      statTimer: 0,
      stat: null,
    };
  },
  mounted: function () {},
  activated: function () {
    if (window.matchMedia("(max-width: 576px)").matches) {
      console.log(this.$router);
      this.$router.replace("/h5/flt/orders");
    } else {
      this.search();
      // console.log('activated')
      const self = this;
      // this.statTimer = setInterval(statFlightOrderStatus(v => { this.stat = v }), 1000 * 5)
      this.statTimer = setInterval(function () {
        self.doStat();
      }, 1000 * 60);
      // console.log(this.statTimer)
    }
  },
  deactivated: function () {
    // console.log('deactivated')
    clearInterval(this.statTimer);
  },
  methods: {
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("hideLoading");
    },
    search: function () {
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.beginDate": this.beginDate,
        "sc.endDate": this.endDate,
        "sc.name": this.name,
        "sc.idno": this.idno,
        "sc.status": this.status,
        "sc.customerId": this.customerId,
        "sc.customerType": this.customerType,
        "sc.ticketNo": this.ticketNo,
        "sc.intlTicket": this.intlTicket,
        "sc.pnrNo": this.pnrNo,
        "sc.workStatus": this.workStatus,
        "sc.onlyMine": this.onlyMine,
        "sc.op1": this.op1,
        "sc.orderNo": this.orderNo,
        "sc.payStatus": this.payStatus,
        "sc.departureDate": this.ddate,
        "sc.flightNo": this.flightNo,
      };
      this.showLoading("查询中");
      searchFlightOrders(
        params,
        (jsonResult) => {
          this.dataList = jsonResult.dataList;
          this.sc = jsonResult.page;
        },
        () => {
          this.hideLoading();
        }
      );
    },
    reset: function () {
      this.beginDate = "";
      this.endDate = "";
      this.name = "";
      this.idno = "";
      this.ticketNo = "";
      this.pnrNo = "";
      this.status = -1;
      this.workStatus = 0;
      this.sc.pageNo = 1;
      this.onlyMine = 0;
      this.op1 = "";
      this.orderNo = "";

      this.ddate = "";
      this.flightNo = "";

      this.customerId = -1;
      // this.search()
    },
    doStat: function () {
      statFlightOrderStatus((v) => {
        this.stat = v;
        // console.log(v)
      });
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>
